<template>
  <view>
    <input :value="value" placeholder="input" @blur="onBlur" :focus="focus==='input'" type="text" />
    <textarea :value="value" placeholder="textarea" @blur="onBlur" :focus="focus==='textarea'" />
    <view>focus:{{focus}}</view>
    <view>start:{{start}}</view>
    <view>end:{{end}}</view>
    <button @click="getSelectedTextRange('none')">getSelectedTextRange none</button>
    <button @click="getSelectedTextRange('input')">getSelectedTextRange input</button>
    <button @click="getSelectedTextRange('textarea')">getSelectedTextRange textarea</button>
  </view>
</template>

<script>
export default {
  data () {
    return {
      value: 'test',
      focus: 'none',
      start: -1,
      end: -1
    }
  },
  methods: {
    onBlur (event) {
      this.focus = 'none'
    },
    getSelectedTextRange (focus) {
      if (focus) {
        this.focus = focus
      }
      return new Promise((resolve, reject) => {
        this.$nextTick(() => {
          uni.getSelectedTextRange({
            success: (res) => {
              console.log(res)
              this.start = res.start
              this.end = res.end
              resolve()
            },
            fail: (err) => {
              console.log(err)
              this.start = this.end = -1
              resolve()
            }
          })
        })
      })
    }
  }
}
</script>

<style>
input,
textarea {
  background-color: #999999;
  margin: 2px 0;
}
</style>